<template>
  <el-container
    class="layout-ltb"
    v-loading="loading"
    element-loading-text="正在导入，请耐心等待"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#e1f5fea8"
  >
    <el-aside width="360px" class="p-[15px]">
      <el-menu :default-active="defaultActiveMenu" unique-opened>
        <el-sub-menu index="1">
          <template #title>
            <el-icon class="mt-[-4px]" @click="f_ClickMenuMain('point')">
              <box-icon
                color="'#878a99"
                size="18px"
                name="map"
                class="mt-[4px]"
              />
            </el-icon>
            <span @click="f_ClickMenuMain('point')"> 管点 </span>
          </template>
          <el-menu-item
            @click="f_ClickMenu(ele, 'point')"
            :index="'1-' + index"
            v-for="(ele, index) in pointData"
            :key="index"
          >
            <img
              v-if="ele.image == 1"
              :src="deviceIcon1"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 2"
              :src="deviceIcon2"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 3"
              :src="deviceIcon3"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 4"
              :src="deviceIcon4"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 5"
              :src="deviceIcon5"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 6"
              :src="deviceIcon6"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 7"
              :src="deviceIcon7"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 8"
              :src="deviceIcon8"
              class="device-icon menu"
            />

            <img
              v-if="ele.image == 9"
              :src="deviceIcon9"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 10"
              :src="deviceIcon10"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 11"
              :src="deviceIcon11"
              class="device-icon menu"
            />

            <img
              v-if="ele.image == 12"
              :src="deviceIcon12"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 13"
              :src="deviceIcon13"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 14"
              :src="deviceIcon14"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 15"
              :src="deviceIcon15"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 16"
              :src="deviceIcon1"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 17"
              :src="deviceIcon17"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 18"
              :src="deviceIcon18"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 19"
              :src="deviceIcon19"
              class="device-icon menu"
            />
            <img
              v-if="ele.image == 20"
              :src="deviceIcon20"
              class="device-icon menu"
            />
            {{ ele.className }} {{ ele.num }}</el-menu-item
          >
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon class="mt-[-4px]" @click="f_ClickMenuMain('line')">
              <box-icon
                color="'#878a99"
                size="18px"
                name="sitemap"
                class="mt-[4px]"
              />
            </el-icon>
            <span @click="f_ClickMenuMain('line')"> 管段 </span>
          </template>
          <el-menu-item
            @click="f_ClickMenu(ele, 'line')"
            :index="'2-' + index"
            v-for="(ele, index) in lineData"
            :key="index"
          >
            <span
              class="linePoint"
              :style="{ background: ele.image ? ele.image : '#fff' }"
            ></span>
            {{ ele.className }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header height="114">
        <div class="pt-[20px] pb-[0px] pl-[0px] fw-bold color-[#2196f3]">
          筛选设备
        </div>
        <el-form
          ref="queryFormRef"
          :model="queryParams"
          size="default"
          label-position="right"
          class="search-form mt-[20px]"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="搜索:">
                <el-input
                  v-model="queryVal"
                  :placeholder="
                    pointOrLine == 'point'
                      ? '请输入管点名称/编号:'
                      : '请输入管段名称/编号:'
                  "
                  maxlength="20"
                  show-word-limit
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="录入时间:">
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  append-to-body="false"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="批量导入数据时，管点/管段类型的名称请与系统命令中保持一致，若不一致则视为无效数据！"
                placement="top-start"
              >
                <i-ep-warningFilled
                  class="float-right mr-[2px] ml-[5px] text-size-[11px] v-bottom"
                />
              </el-tooltip>

              <el-button
                @click="f_HandleDownload"
                type=""
                class="ml-[20px] float-right pl-[10px!important] pr-[10px!important] h-[30px!important] float-right"
              >
                <i-ep-download
                  class="mr-[2px] text-size-[11px] v-bottom"
                />下载模板
              </el-button>
              <el-select
                v-model="operatType"
                placeholder="批量操作"
                el-select
                size="default"
                class="w-[150px!important] float-right h-[28px!Important]"
                @change="f_Change"
              >
                <el-option label="批量导入" value="1" />
                <el-option label="批量导出" value="2" />
                <el-option label="批量删除" value="3" />
              </el-select>

              <el-button
                @click="f_HandleSearch"
                type="primary"
                class="mr-[20px] float-right pl-[10px!important] pr-[10px!important] h-[30px!important] float-right"
              >
                <i-ep-search class="mr-[2px] text-size-[11px] v-bottom" />查询
              </el-button>
            </el-col>
          </el-row>
        </el-form>

        <el-row :gutter="20">
          <el-col :span="6" />
        </el-row>
      </el-header>
      <el-main>
        <div class="pt-[0px] pb-[15px] pl-[0px] fw-bold color-[#2196f3]">
          设备类型
        </div>
        <div>
          <el-table
            v-if="tableData.length && pointOrLine == 'point'"
            :data="tableData"
            border
            :height="tableHeight"
            header-row-class-name="table-header"
            ref="tableRef"
            size="small"
          >
            <el-table-column
              type="selection"
              width="60"
              label="序号"
              align="center"
            />
            <el-table-column
              type="index"
              width="60"
              label="序号"
              align="center"
            />
            <el-table-column
              prop="pointName"
              width="160"
              label="管点名称"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="pointGisNo"
              width="160"
              label="管点GIS编号"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="jsonGeom"
              width="160"
              label="坐标位置"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                {{ f_GetPosition(scope.row.jsonGeom) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              width="160"
              label="详细地址"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="depth"
              width="160"
              label="埋深"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="workStartDate"
              width="160"
              label="投运时间"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                {{
                  scope.row.workStartDate
                    ? moment(scope.row.workStartDate).format("yyyy-MM-DD")
                    : "-"
                }}
              </template>
            </el-table-column>

            <el-table-column
              v-for="(item, index) in attrTitleData"
              :key="index"
              :prop="'attr' + index"
              width="160"
              :label="item"
              align="center"
              show-overflow-tooltip
            />

            <el-table-column
              prop="createTime"
              width="160"
              label="录入时间"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                {{ moment(scope.row.createTime).format("yyyy-MM-DD HH:mm:ss") }}
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              width="160"
              label="备注"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="操作"
              align="center"
              width="140"
              fixed="right"
            >
              <template #default="scope">
                <el-button
                  v-if="!pointOrLineMain.length"
                  type="primary"
                  size="small"
                  link
                  @click="f_OpenDialog(scope.row, 1)"
                  ><i-ep-edit
                    class="mr-[2px] text-size-[11px] v-bottom"
                  />编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  link
                  @click="f_Del(scope.row)"
                  ><i-ep-delete
                    class="mr-[2px] text-size-[11px] v-bottom"
                  />删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-table
            v-if="tableData.length && pointOrLine == 'line'"
            :data="tableData"
            border
            :height="tableHeight"
            header-row-class-name="table-header"
            ref="tableRef"
            size="small"
          >
            <el-table-column
              type="selection"
              width="60"
              label="序号"
              align="center"
            />
            <el-table-column
              type="index"
              width="60"
              label="序号"
              align="center"
            />
            <el-table-column
              prop="lineGisNo"
              width="160"
              label="管段编号"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="lineName"
              width="160"
              label="管段名称"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="startPointName"
              width="160"
              label="起点名称"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="startPointGisNo"
              width="160"
              label="坐标位置"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                {{
                  scope.row.jsonGeom
                    ? JSON.parse(scope.row.jsonGeom).coordinates[0].join(",")
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="endPointName"
              width="160"
              label="终点名称"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="endPointGisNo"
              width="160"
              label="坐标位置"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                {{
                  scope.row.jsonGeom
                    ? JSON.parse(scope.row.jsonGeom).coordinates[1].join(",")
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="length"
              width="160"
              label="管段长度（米）"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="depth"
              width="160"
              label="平均埋深（米）"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              v-if="pointOrLineMain.length"
              prop="diameter"
              width="160"
              label="管经"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              v-if="pointOrLineMain.length"
              prop="caliber"
              width="160"
              label="口径"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              v-if="pointOrLineMain.length"
              prop="tubing"
              width="160"
              label="管材"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="workStartDate"
              width="160"
              label="投运时间"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                {{
                  scope.row.workStartDate
                    ? moment(scope.row.workStartDate).format("yyyy-MM-DD")
                    : "-"
                }}
              </template>
            </el-table-column>

            <el-table-column
              v-for="(item, index) in attrTitleData"
              :key="index"
              :prop="'attr' + index"
              width="160"
              :label="item"
              align="center"
              show-overflow-tooltip
            />

            <el-table-column
              prop="createTime"
              width="160"
              label="录入时间"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                {{ moment(scope.row.createTime).format("yyyy-MM-DD HH:mm:ss") }}
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              width="160"
              label="备注"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="操作"
              align="center"
              width="140"
              fixed="right"
            >
              <template #default="scope">
                <el-button
                  v-if="!pointOrLineMain.length"
                  type="primary"
                  size="small"
                  link
                  @click="f_OpenDialog(scope.row, 2)"
                  ><i-ep-edit
                    class="mr-[2px] text-size-[11px] v-bottom"
                  />编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  link
                  @click="f_Del(scope.row)"
                  ><i-ep-delete
                    class="mr-[2px] text-size-[11px] v-bottom"
                  />删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <noneData :noneShow="!tableData.length" :height="tableHeight" />

          <pagination
            v-if="pointOrLineMain.length && total > 0"
            size="small"
            v-model:total="total"
            v-model:page="queryParams.pageIndex"
            v-model:limit="queryParams.pageSize"
            @pagination="f_ClickMenuMainPage"
          />

          <pagination
            v-if="!pointOrLineMain.length && total > 0"
            size="small"
            v-model:total="total"
            v-model:page="queryParams.pageIndex"
            v-model:limit="queryParams.pageSize"
            @pagination="f_HandelQueryList"
          />
        </div>
      </el-main>
    </el-container>

    <!-- 表单弹窗 -->
    <div v-if="dialog.visible">
      <el-drawer
        v-model="dialog.visible"
        :title="dialog.title"
        width="900px"
        class="user-dialog"
        style="overflow: hidden; background-color: #fff"
        @close="f_CloseDialog"
        :close-on-click-modal="false"
        destroy-on-close
      >
        <el-form
          v-if="pointOrLine == 'point'"
          ref="userFormRef"
          label-position="left"
          label-width="120px"
          :inline="true"
          size="default"
        >
          <el-row :gutter="15">
            <el-col :span="24">
              <div>
                <el-form-item label="管点编号" prop="pointGisNo">
                  <el-input v-model="formData.pointGisNo" disabled />
                </el-form-item>

                <el-form-item label="位置" prop="geom">
                  <el-input v-model="formData.geom" disabled />
                </el-form-item>

                <el-form-item label="管点类型" prop="classId">
                  <b
                    style="position: absolute; left: -128px; top: 0; color: red"
                    >*</b
                  >
                  <el-select
                    v-model="formData.classId"
                    placeholder="请选择管点类型"
                    clearable
                    size="default"
                    disabled
                  >
                    <el-option
                      v-for="item in pointData"
                      :key="item.classId"
                      :label="item.className"
                      :value="item.classId"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="管点名称" prop="pointName">
                  <b
                    style="position: absolute; left: -128px; top: 0; color: red"
                    >*</b
                  >
                  <el-input
                    v-model="formData.pointName"
                    placeholder="请输入"
                    show-word-limit
                    maxlength="20"
                  />
                </el-form-item>

                <el-form-item label="地址" prop="address">
                  <b
                    style="position: absolute; left: -128px; top: 0; color: red"
                    >*</b
                  >
                  <el-input
                    v-model="formData.address"
                    placeholder="请输入"
                    show-word-limit
                    maxlength="50"
                  />
                </el-form-item>

                <el-form-item label="投运时间" prop="workStartDate">
                  <el-date-picker
                    v-model="formData.workStartDate"
                    type="date"
                    placeholder="请选择投运时间"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>

                <el-form-item label="埋深" prop="depth">
                  <el-input
                    v-model="formData.depth"
                    placeholder="请输入"
                    show-word-limit
                    maxlength="20"
                  />
                </el-form-item>

                <el-form-item
                  v-for="(option, index) in dynamicFieldsNew"
                  :key="option.attr"
                  :label="option.attr"
                  :prop="option.attr"
                  :rules="{
                    message: `请输入${option.attr}`,
                  }"
                >
                  <b
                    v-if="option.require"
                    style="position: absolute; left: -128px; top: 0; color: red"
                    >*</b
                  >
                  <el-input-number
                    v-if="option.type === 1"
                    v-model="option.value"
                    :max="10000000"
                    :min="-10000000"
                    :controls="false"
                    style="width: 100%; text-align: left"
                  />
                  <el-input
                    v-if="option.type === 2"
                    v-model="option.value"
                    maxlength="20"
                    show-word-limit
                  />
                  <el-select v-if="option.type === 3" v-model="option.value">
                    <el-option
                      v-for="item in option.options"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                  <template v-if="option.type === 4">
                    <el-upload
                      :show-file-list="false"
                      style="margin-right: 20px"
                      ref="upload"
                      action="#"
                      list-type="text"
                      :auto-upload="false"
                      accept=".jpg,.jpeg,.png,.bmp,.JPG,.JPEG,.BMP"
                      :on-change="(file) => changeUpload(file, index)"
                    >
                      <el-icon><Plus /></el-icon>
                    </el-upload>

                    <span
                      v-for="(img, imgIndex) in option.value"
                      style="
                        display: inline-block;
                        margin-right: 20px;
                        width: 20%;
                      "
                    >
                      <i-ep-close
                        @click="f_DelImg(index, imgIndex)"
                        class="mr-[2px] text-size-[11px] v-bottom color-[red]"
                      />
                      <img
                        style="width: 100%"
                        w-full
                        :src="img.url"
                        :key="img.url"
                      />
                    </span>
                  </template>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="formData.remark"
                    maxlength="20"
                    show-word-limit
                  />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>

        <el-form
          v-if="pointOrLine == 'line'"
          ref="userFormRef"
          label-position="left"
          label-width="120px"
          :inline="true"
          size="default"
        >
          <el-row :gutter="15">
            <el-col :span="24">
              <div>
                <!-- <el-form-item label="起点编号" prop="startPointGisNo">
                  <el-input v-model="formData.startPointGisNo" disabled />
                </el-form-item>

                <el-form-item label="埋深" prop="geom">
                  <el-input v-model="formData.geom" disabled />
                </el-form-item>

                <el-form-item label="终点编号" prop="endPointGisNo">
                  <el-input v-model="formData.endPointGisNo" disabled />
                </el-form-item>

                <el-form-item label="埋深" prop="geom">
                  <el-input v-model="formData.geom" disabled />
                </el-form-item> -->

                <el-form-item label="管段编号" prop="lineGisNo">
                  <el-input v-model="formData.lineGisNo" disabled />
                </el-form-item>

                <el-form-item label="管段长度" prop="length">
                  <el-input v-model="formData.length" disabled />
                </el-form-item>

                <el-form-item label="平均埋深" prop="depth">
                  <el-input v-model="formData.depth" disabled />
                </el-form-item>

                <el-form-item label="投运时间" prop="workStartDate">
                  <el-date-picker
                    v-model="formData.workStartDate"
                    type="date"
                    placeholder="请选择投运时间"
                  />
                </el-form-item>

                <el-form-item label="管段名称" prop="lineName">
                  <b
                    style="position: absolute; left: -128px; top: 0; color: red"
                    >*</b
                  >
                  <el-input
                    v-model="formData.lineName"
                    maxlength="20"
                    show-word-limit
                  />
                </el-form-item>

                <el-form-item label="管段类型" prop="classId">
                  <el-select
                    v-model="formData.classId"
                    placeholder="请选择管段类型"
                    clearable
                    size="default"
                    disabled
                  >
                    <el-option
                      v-for="item in lineData"
                      :key="item.classId"
                      :label="item.className"
                      :value="item.classId"
                    />
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="管径" prop="diameter">
                <el-input v-model="formData.diameter" disabled />
              </el-form-item>
              <el-form-item label="口径" prop="caliber">
                <el-input v-model="formData.caliber" disabled />
              </el-form-item>
              <el-form-item label="管材" prop="tubing">
                <el-input v-model="formData.tubing" disabled />
              </el-form-item> -->

                <el-form-item
                  v-for="(option, index) in dynamicFieldsNew"
                  :key="option.attr"
                  :label="option.attr"
                  :prop="option.attr"
                  :rules="{
                    message: `请输入${option.attr}`,
                  }"
                >
                  <b
                    v-if="option.require"
                    style="position: absolute; left: -128px; top: 0; color: red"
                    >*</b
                  >
                  <el-input-number
                    v-if="option.type === 1"
                    v-model="option.value"
                    :max="10000000"
                    :min="-10000000"
                  />
                  <el-input
                    v-if="option.type === 2"
                    v-model="option.value"
                    maxlength="20"
                    show-word-limit
                  />
                  <el-select v-if="option.type === 3" v-model="option.value">
                    <el-option
                      v-for="item in option.options"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                  <template v-if="option.type === 4">
                    <el-upload
                      style="margin-right: 20px"
                      ref="upload"
                      action="#"
                      list-type="text"
                      :auto-upload="false"
                      accept=".jpg,.jpeg,.png,.bmp,.JPG,.JPEG,.BMP"
                      :on-change="(file) => changeUpload(file, index)"
                      clsss="myupload1"
                      :show-file-list="false"
                    >
                      <el-icon><Plus /></el-icon>
                    </el-upload>

                    <span
                      v-for="(img, imgIndex) in option.value"
                      style="
                        display: inline-block;
                        margin-right: 20px;
                        width: 20%;
                      "
                    >
                      <i-ep-close
                        @click="f_DelImg(index, imgIndex)"
                        class="mr-[2px] text-size-[11px] v-bottom color-[red]"
                      />
                      <img
                        style="width: 100%"
                        w-full
                        :src="img.url"
                        :key="img.url"
                      />
                    </span>
                  </template>
                </el-form-item>

                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="formData.remark"
                    maxlength="20"
                    show-word-limit
                  />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button
              @click="f_CloseDialog"
              size="default"
              type="warning"
              class="pt-[14px] pb-[14px] pl-[30px] pr-[30px] mr-[20px]"
            >
              <i-ep-close class="text-size-[11px] mr-[4px]" />取 消</el-button
            >
            <el-button
              type="primary"
              @click="f_HandleSubmitPoint"
              class="pt-[14px] pb-[14px] pl-[30px] pr-[30px]"
            >
              <i-ep-finished class="text-size-[11px] mr-[4px]" />确
              定</el-button
            >
          </div>
        </template>
      </el-drawer>
    </div>
    <el-dialog
      v-model="dialogImport.visible"
      title="批量导入"
      width="600px"
      class="user-dialog"
      style="background-color: #f5f5f5"
      append-to-body
      @close="f_CloseDialog"
      destroy-on-close
    >
      <el-form size="default" class="p-[20px] bg-[#fff]">
        <el-upload
          ref="upload"
          :limit="1"
          :auto-upload="false"
          :on-change="f_ChangeUpload"
          :on-exceed="handleExceed"
        >
          <template #trigger>
            <el-button size="small" type="primary"
              ><el-icon size="14" color="#fff">
                <Upload />
              </el-icon>
              浏览文件...</el-button
            >
          </template>
        </el-upload>
      </el-form>
      <template #footer>
        <div class="dialog-footer pb-[12px] pr-[20px]">
          <el-button
            @click="f_CloseDialog"
            size="small"
            type="warning"
            class="pt-[14px] pb-[14px] pl-[30px] pr-[30px] mr-[20px]"
          >
            <i-ep-close class="text-size-[11px] mr-[4px]" />取 消</el-button
          >
          <el-button
            size="small"
            type="primary"
            @click="f_HandleImport"
            class="pt-[14px] pb-[14px] pl-[30px] pr-[30px]"
          >
            <i-ep-finished class="text-size-[11px] mr-[4px]" />确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup lang="ts">
defineOptions({
  name: "Inspection",
  inheritAttrs: false,
});
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";
import { genFileId } from "element-plus";
const IMG_BASE_URL = import.meta.env.VITE_APP_API_OSS;
import { orderBy } from "lodash";
import { uploadImg } from "@/api/pipe/index";
import moment from "moment";
import DeviceCategoryApi from "@/api/DeviceCategoryApi";
import GisPointInfoAPI from "@/api/GisPointInfoAPI";
import GisLineInfoAPI from "@/api/GisLineInfoAPI";
import fileDownload from "js-file-download";
let tableHeight = ref(0);
const tableRef = ref();
const dialogIcon = reactive({
  visible: false,
});
const pointOrLine = ref("point");
const queryFormRef = ref(ElForm);
const formRef = ref(ElForm);
const loading = ref(false);
const total = ref(0);
const currentDeviceData = ref({ classId: 0 });
const operatType = ref(undefined);
const queryParams = reactive({
  pageIndex: 1,
  pageSize: 10,
});
const queryVal = ref("");
const dateRange = ref([]);
const fileList = ref([]);
const formData = ref({});
const upload = ref<UploadInstance>();
const defaultActiveMenu = ref("1-0");

const dialog = reactive<DialogOption>({
  visible: false,
});
const dialogImport = reactive<DialogOption>({
  visible: false,
});
const attrTitleData = ref([]);

// 管点
const pointData = ref([]);

// 管线
const lineData = ref([]);

//表格数据
const tableData = ref([]);

const dynamicFields = ref([]);

const pointOrLineMain = ref("");

const rules = reactive({
  pointGisNo: [{ required: true, message: "请输入", trigger: "blur" }],
  geom: [{ required: true, message: "请输入", trigger: "blur" }],
  classId: [{ required: true, message: "请输入", trigger: "blur" }],
  pointName: [{ required: true, message: "请输入", trigger: "blur" }],
  address: [{ required: true, message: "请输入", trigger: "blur" }],
});

let formDataImport = reactive({
  file: "",
});

const deviceIcon1 = ref(
  new URL(`../../../assets/device/1.png`, import.meta.url).href
);
const deviceIcon2 = ref(
  new URL(`../../../assets/device/1.png`, import.meta.url).href
);
const deviceIcon3 = ref(
  new URL(`../../../assets/device/2.png`, import.meta.url).href
);
const deviceIcon4 = ref(
  new URL(`../../../assets/device/3.png`, import.meta.url).href
);
const deviceIcon5 = ref(
  new URL(`../../../assets/device/4.png`, import.meta.url).href
);
const deviceIcon6 = ref(
  new URL(`../../../assets/device/5.png`, import.meta.url).href
);
const deviceIcon7 = ref(
  new URL(`../../../assets/device/6.png`, import.meta.url).href
);
const deviceIcon8 = ref(
  new URL(`../../../assets/device/7.png`, import.meta.url).href
);
const deviceIcon9 = ref(
  new URL(`../../../assets/device/9.png`, import.meta.url).href
);
const deviceIcon10 = ref(
  new URL(`../../../assets/device/10.png`, import.meta.url).href
);
const deviceIcon11 = ref(
  new URL(`../../../assets/device/11.png`, import.meta.url).href
);
const deviceIcon12 = ref(
  new URL(`../../../assets/device/12.png`, import.meta.url).href
);
const deviceIcon13 = ref(
  new URL(`../../../assets/device/13.png`, import.meta.url).href
);
const deviceIcon14 = ref(
  new URL(`../../../assets/device/14.png`, import.meta.url).href
);
const deviceIcon15 = ref(
  new URL(`../../../assets/device/15.png`, import.meta.url).href
);
const deviceIcon16 = ref(
  new URL(`../../../assets/device/16.png`, import.meta.url).href
);
const deviceIcon17 = ref(
  new URL(`../../../assets/device/17.png`, import.meta.url).href
);
const deviceIcon18 = ref(
  new URL(`../../../assets/device/18.png`, import.meta.url).href
);
const deviceIcon19 = ref(
  new URL(`../../../assets/device/19.png`, import.meta.url).href
);
const deviceIcon20 = ref(
  new URL(`../../../assets/device/20.png`, import.meta.url).href
);

// 动态列 新赋值
const dynamicFieldsNew = ref([]);

// 查询 分类对应的最新属性
function f_HandelQueryAttr() {
  attrTitleData.value = [];
  if (pointOrLine.value == "point") {
    const params1 = {
      pageSize: 1,
      pageIndex: 1,
      classId: currentDeviceData.value.classId,
    };
    DeviceCategoryApi.api_query(params1).then(({ data, errors, succeeded }) => {
      if (succeeded) {
        if (typeof data.items[0].classAttribute == "string") {
          dynamicFields.value = JSON.parse(data.items[0].classAttribute);
        } else {
          dynamicFields.value = data.items[0].classAttribute;
        }

        dynamicFields.value.forEach((item) => {
          // if (item.type != 4) {
          attrTitleData.value.push(item.attr);
          // }
        });
        f_HandelQueryList();
      }
    });
  } else {
    const params2 = {
      pageSize: 1,
      pageIndex: 1,
      classId: currentDeviceData.value.classId,
    };

    DeviceCategoryApi.api_query(params2).then(({ data, errors, succeeded }) => {
      if (data.items) {
        // lineData.value = data.items;
        if (typeof data.items[0].classAttribute == "string") {
          dynamicFields.value = JSON.parse(data.items[0].classAttribute);
        } else {
          dynamicFields.value = data.items[0].classAttribute;
        }

        dynamicFields.value.forEach((item) => {
          if (item.type != 4) {
            attrTitleData.value.push(item.attr);
          }
        });
        f_HandelQueryList();
      }
    });
  }
}

// 上传验证
const beforeUpload = (file) => {
  const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
  const whiteList = ["jpg", "jpeg", "png", "bmp", "JPG", "JPEG", "BMP"];
  if (whiteList.indexOf(fileSuffix) === -1) {
    ElMessage.error("上传文件只能是jpg,jpeg,png,bmp,JPG,JPEG,BMP格式");
    return false;
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessage.error("上传文件大小不能超过 2MB");
    return false;
  }
};

const handleExceed: UploadProps["onExceed"] = (files) => {
  upload.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value!.handleStart(file);
};

// 下载模板
function f_HandleDownload() {
  if (pointOrLine.value == "point") {
    window.open("./管点导入模板.xls");
  } else {
    window.open("./管段导入模板.xls");
  }
}

// 导入客户信息弹框
function f_OpenImportDialog() {
  fileList.value = [];
  formDataImport.file = "";
  dialogImport.visible = true;
}

// 上传图片
function changeUpload(file, index) {
  const isLt2M = file.size / 1024 / 1024 < 5;
  if (!isLt2M) {
    ElMessage.error("上传文件大小不能超过 5MB");
    return false;
  }

  if (dynamicFieldsNew.value[index].value.length > 8) {
    ElMessage.error("最大上传9张图片！");
    return;
  }
  uploadImg(file.raw).then((data) => {
    dynamicFieldsNew.value[index].value.push({
      url: IMG_BASE_URL + data.data.path,
    });
  });
}

// 删除上传的图片
function f_DelImg(index, imgIndex) {
  dynamicFieldsNew.value[index].value.splice(imgIndex, 1);
}

// 上传
function f_ChangeUpload(data) {
  if (data.name.split(".")[1] != "xls") {
    fileList.value = "";
    upload.value!.clearFiles();
    formDataImport.file = "";
    ElMessage.error("请按照下载模板文件格式上传！");
    return;
  }

  formDataImport.file = data.raw;
}

// 导入 确认
function f_HandleImport() {
  if (!formDataImport.file) {
    ElMessage.error("请上传批量导入数据！");
  }
  const params = new FormData();
  params.append("file", formDataImport.file);
  params.append("IsCheck", 1);
  loading.value = true;
  dialogImport.visible = false;
  // if (pointOrLine.value == "point") {
  //   defaultActiveMenu.value = "1-0";
  //   currentDeviceData.value = pointData.value[0];
  // } else {
  //   defaultActiveMenu.value = "2-0";
  //   currentDeviceData.value = lineData.value[0];
  // }

  setTimeout(() => {
    if (pointOrLine.value == "point") {
      GisPointInfoAPI.api_import(params).then(({ data, errors, succeeded }) => {
        loading.value = false;

        if (succeeded) {
          pointData.value = [];
          lineData.value = [];

          f_HandelQuery();
          ElMessage.success("批量导入成功！");
        } else {
          if (
            String(errors).indexOf("是否继续") > -1 ||
            String(errors).indexOf("是否覆盖") > -1
          ) {
            ElMessageBox.confirm(errors, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              f_HandleImportChecked();
            });
          } else {
            ElMessage.error(errors);
          }
        }
      });
    } else {
      GisLineInfoAPI.api_import(params).then(({ data, errors, succeeded }) => {
        loading.value = false;
        if (succeeded) {
          pointData.value = [];
          lineData.value = [];
          f_HandelQuery();
          ElMessage.success("批量导入成功！");
        } else {
          if (
            String(errors).indexOf("是否继续") > -1 ||
            String(errors).indexOf("是否覆盖") > -1
          ) {
            ElMessageBox.confirm(errors, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              f_HandleImportChecked();
            });
          } else {
            ElMessage.error(errors);
          }
        }
      });
    }
  }, 1500);
}

// 导入 确认 二次确认之后
function f_HandleImportChecked() {
  const params = new FormData();
  params.append("file", formDataImport.file);
  params.append("IsCheck", 0);
  loading.value = true;
  if (pointOrLine.value == "point") {
    GisPointInfoAPI.api_import(params).then(({ data, errors, succeeded }) => {
      loading.value = false;
      if (succeeded) {
        f_HandelQuery();
        ElMessage.success("批量导入成功！");
      } else {
        ElMessage.error(errors);
      }
    });
  } else {
    GisLineInfoAPI.api_import(params).then(({ data, errors, succeeded }) => {
      loading.value = false;
      if (succeeded) {
        f_HandelQuery();
        ElMessage.success("批量导入成功！");
      } else {
        ElMessage.error(errors);
      }
    });
  }
}

// 返回列的坐标
function f_GetPosition(data) {
  if (data) {
    let position =
      JSON.parse(data).coordinates[0] + "," + JSON.parse(data).coordinates[1];
    return position;
  }
  return "--";
}

// 关闭弹框
function f_CloseDialog() {
  dialog.visible = false;
  dialogImport.visible = false;
  f_HandelQueryList();
}

// 打开用户弹窗
function f_OpenDialog(data: any, type) {
  dynamicFieldsNew.value = JSON.parse(JSON.stringify(dynamicFields.value));
  let att = [];
  if (type == 1) {
    if (typeof data.pointAttribute == "string") {
      att = JSON.parse(data.pointAttribute);
    } else {
      att = data.pointAttribute;
    }
    dialog.title = "管点 - 编辑";
  } else {
    if (typeof data.lineAttribute == "string") {
      att = JSON.parse(data.lineAttribute);
    } else {
      att = data.lineAttribute;
    }
    dialog.title = "管段 - 编辑";
  }
  formData.value = JSON.parse(JSON.stringify(data));

  dynamicFieldsNew.value.forEach((item, index) => {
    let attrValue = "";
    att.forEach((ele) => {
      if (ele.attr == item.attr) {
        if (item.type == 4) {
          if (ele.value == "") {
            attrValue = [];
          } else {
            attrValue = ele.value;
          }
        } else {
          attrValue = ele.value;
        }
      }
      //  else if (ele.attr != item.attr && item.type == 4) {
      //   attrValue = [];
      // } else if (ele.attr != item.attr && item.type != 4) {
      //   attrValue = "";
      // }
    });
    dynamicFieldsNew.value[index].value = attrValue;
  });
  dialog.visible = true;
}

// 批量操作
function f_Change() {
  if (operatType.value == 3) {
    let tableData = tableRef.value.getSelectionRows();
    if (!tableData.length) {
      ElMessage.error("请选择需要批量删除的数据！");
      operatType.value = undefined;
      return;
    }
    ElMessageBox.confirm("确认批量删除操作?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        f_HandleDelBatch();
        operatType.value = undefined;
      })
      .catch(() => {
        ElMessage.info("已取消删除!");
        operatType.value = undefined;
      });
  } else if (operatType.value == 2) {
    let tableData = tableRef.value.getSelectionRows();
    if (!tableData.length) {
      ElMessage.error("请选择需要批量导出的数据！");
      operatType.value = undefined;
      return;
    }

    if (pointOrLine.value == "point") {
      if (pointOrLineMain.value.length) {
        let pointIds = [];
        tableData.forEach((item) => {
          pointIds.push(item.pointId);
        });
        let params = {
          pointIds: pointIds,
          pageIndex: 1,
          pageSize: 1000,
        };

        GisPointInfoAPI.api_export_query_async_(params).then((res: any) => {
          operatType.value = undefined;
          fileDownload(
            res.data,
            "设备台账-管点-" +
              moment(new Date()).format("YYYY年MM月DD日HH时mm分ss秒") +
              ".xlsx"
          );
        });
      } else {
        let pointIds = [];
        tableData.forEach((item) => {
          pointIds.push(item.pointId);
        });
        let params = {
          pointIds: pointIds,
          pageIndex: 1,
          pageSize: 1000,
          classId: currentDeviceData.value.classId,
        };

        GisPointInfoAPI.api_export_query_async(params).then((res: any) => {
          operatType.value = undefined;
          fileDownload(
            res.data,
            "设备台账-管点-" +
              moment(new Date()).format("YYYY年MM月DD日HH时mm分ss秒") +
              ".xlsx"
          );
        });
      }
    } else {
      if (pointOrLineMain.value.length) {
        let pointIds = [];
        tableData.forEach((item) => {
          pointIds.push(item.lineId);
        });
        let params = {
          lineIds: pointIds,
          pageIndex: 1,
          pageSize: 1000,
        };

        GisLineInfoAPI.api_export_query_async_(params).then((res: any) => {
          operatType.value = undefined;
          fileDownload(
            res.data,
            "设备台账-管段-" +
              moment(new Date()).format("YYYY年MM月DD日HH时mm分ss秒") +
              ".xlsx"
          );
        });
      } else {
        let pointIds = [];
        tableData.forEach((item) => {
          pointIds.push(item.lineId);
        });
        let params = {
          lineIds: pointIds,
          pageIndex: 1,
          pageSize: 1000,
          classId: currentDeviceData.value.classId,
        };

        GisLineInfoAPI.api_export_query_async(params).then((res: any) => {
          operatType.value = undefined;
          fileDownload(
            res.data,
            "设备台账-管段-" +
              moment(new Date()).format("YYYY年MM月DD日HH时mm分ss秒") +
              ".xlsx"
          );
        });
      }
    }
  } else {
    f_OpenImportDialog();
    operatType.value = undefined;
  }
}

// 批量删除
function f_HandleDelBatch() {
  let tableData = tableRef.value.getSelectionRows();

  if (pointOrLine.value == "point") {
    let pointIds = [];
    tableData.forEach((item) => {
      pointIds.push(item.pointId);
    });
    const params = {
      pointIds: pointIds,
    };
    GisPointInfoAPI.api_del_batch(params).then(
      ({ data, errors, succeeded }) => {
        if (succeeded) {
          ElMessage.success("批量删除成功！");
          operatType.value = undefined;
          f_HandelQueryList();
        }
        loading.value = false;
      }
    );
  } else {
    let lineIds = [];
    tableData.forEach((item) => {
      lineIds.push(item.lineId);
    });
    const params = {
      lineIds: lineIds,
    };
    GisLineInfoAPI.api_del_batch(params).then(({ data, errors, succeeded }) => {
      if (succeeded) {
        ElMessage.success("批量删除成功！");
        operatType.value = undefined;
        f_HandelQueryList();
      }
      loading.value = false;
    });
  }
}

// 点击左侧菜单
function f_ClickMenu(data: any, type: string) {
  pointOrLine.value = type;
  currentDeviceData.value = data;
  queryParams.pageSize = 10;
  queryParams.pageIndex = 1;
  queryVal.value = "";
  dateRange.value = [];
  f_HandelQueryAttr();
  // f_HandelQueryList();
}

// 删除
function f_Del(data: any) {
  ElMessageBox.confirm("删除后无法恢复，请谨慎操作！?", "确认要删除吗", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      if (pointOrLine.value == "point") {
        const params = {
          pointId: data.pointId,
        };
        GisPointInfoAPI.api_del(params).then(({ data, errors, succeeded }) => {
          if (succeeded) {
            ElMessage.success("删除成功！");
            // f_HandelQueryList();
            f_HandelQuery();
          }
          loading.value = false;
        });
      } else {
        const params = {
          lineId: data.lineId,
        };
        GisLineInfoAPI.api_del(params).then(({ data, errors, succeeded }) => {
          if (succeeded) {
            ElMessage.success("删除成功！");
            // f_HandelQueryList();
            f_HandelQuery();
          }
          loading.value = false;
        });
      }
    })
    .catch(() => ElMessage.info("已取消删除!"));
}

// 批量删除
function f_DelBatch(data: any) {
  let tableData = tableRef.value.getSelectionRows();
  if (!tableData.length) {
    ElMessage.error("请选择需要删除的数据！");
    return;
  }
  let pointIds = [];
  tableData.forEach((item) => {
    pointIds.push(item.pointId);
  });
  const params = {
    pointIds: pointIds,
  };
  GisPointInfoAPI.api_del_batch(params).then(({ data, errors, succeeded }) => {
    if (succeeded) {
      ElMessage.success("批量删除成功！");
      f_HandelQueryList();
    }
    loading.value = false;
  });
}

// 编辑 保存
function f_HandleSubmitPoint() {
  let isRequire = false;
  dynamicFieldsNew.value.forEach((item) => {
    if (item.require && (!String(item.value).length || item.value == null)) {
      isRequire = true;
    }
  });
  if (isRequire) {
    ElMessage.error("设备属性必填项未全部填写！");
    return;
  }
  if (pointOrLine.value == "point") {
    if (!formData.value.pointName.length) {
      ElMessage.error("管点名称未填写！");
      return;
    }
    if (!formData.value.address.length) {
      ElMessage.error("管点地址未填写！");
      return;
    }
    let params = {
      pointName: formData.value.pointName,
      classId: formData.value.classId,
      className: formData.value.className,
      position: formData.value.position,
      address: formData.value.address,
      depth: !formData.value.depth ? 0 : formData.value.depth,
      workStartDate: formData.value.workStartDate
        ? formData.value.workStartDate
        : "",
      pointAttribute: formData.value.pointAttribute,
      jsonPoint: JSON.stringify(
        JSON.parse(formData.value.jsonGeom).coordinates
      ),
      pointId: formData.value.pointId,
      pointGisNo: formData.value.pointGisNo,
      pointAttribute: dynamicFieldsNew.value,
      remark: formData.value.remark,
      isPublish: formData.value.isPublish,
    };
    GisPointInfoAPI.api_update(params).then(({ data, errors, succeeded }) => {
      if (succeeded) {
        ElMessage.success("编辑成功！");
        f_CloseDialog();
        f_HandelQueryList();
      } else {
        ElMessage.error(errors);
      }
    });
  } else {
    if (!formData.value.lineName.length) {
      ElMessage.error("管段名称未填写！");
      return;
    }
    let params = {
      classId: formData.value.classId,
      className: formData.value.className,
      depth: !formData.value.depth ? 0 : formData.value.depth,
      diameter: formData.value.diameter,
      caliber: formData.value.caliber,
      tubing: formData.value.tubing,
      workStartDate: formData.value.workStartDate
        ? formData.value.workStartDate
        : "",
      lineAttribute: formData.value.lineAttribute,
      jsonLine: JSON.stringify(JSON.parse(formData.value.jsonGeom).coordinates),
      lineId: formData.value.lineId,
      lineAttribute: dynamicFieldsNew.value,
      lineName: formData.value.lineName,
      remark: formData.value.remark,
      isPublish: formData.value.isPublish,
      startPointName: formData.value.startPointName,
      endPointName: formData.value.endPointName,
      length: formData.value.length,
    };
    GisLineInfoAPI.api_update(params).then(({ data, errors, succeeded }) => {
      if (succeeded) {
        ElMessage.success("编辑成功！");
        f_CloseDialog();
        f_HandelQueryList();
      } else {
        ElMessage.error(errors);
      }
    });
  }
}

// 查询
function f_HandelQuery() {
  const params1 = {
    pageSize: 100,
    pageIndex: 1,
    pClassId: "01",
  };
  const params2 = {
    pageSize: 100,
    pageIndex: 1,
    pClassId: "02",
  };
  DeviceCategoryApi.api_query_point_(params1).then(
    ({ data, errors, succeeded }) => {
      if (succeeded) {
        pointData.value = orderBy(data, ["sort"], "asc");
        if (pointData.value.length) {
          if (!currentDeviceData.value.classId) {
            currentDeviceData.value = pointData.value[0];
          }
          // f_HandelQueryList();
          f_HandelQueryAttr();
        }
      }

      loading.value = false;
    }
  );
  DeviceCategoryApi.api_query_line(params2).then(
    ({ data, errors, succeeded }) => {
      if (succeeded) {
        lineData.value = orderBy(data, ["sort"], "asc");
        // f_HandelQueryList();
        f_HandelQueryAttr();
      }
      loading.value = false;
    }
  );
}

// 顶部的搜索
function f_HandleSearch() {
  queryParams.pageSize = 10;
  queryParams.pageIndex = 1;
  if (pointOrLineMain.value) {
    f_ClickMenuMainPage();
  } else {
    f_HandelQueryListByOther();
  }
}

// 明细查询
function f_HandelQueryListByOther() {
  attrTitleData.value = [];
  queryParams.pageSize = 10;
  queryParams.pageIndex = 1;
  const params = {
    pageSize: queryParams.pageSize,
    pageIndex: queryParams.pageIndex,
    classId: currentDeviceData.value.classId,
    isCoordinate: "true",
  };
  if (queryVal.value.length) {
    params.queryVal = queryVal.value;
  }
  if (dateRange.value && dateRange.value.length) {
    params.startTime = moment(dateRange.value[0]).format("yyyy-MM-DD 00:00:00");
    params.endTime = moment(dateRange.value[1]).format("yyyy-MM-DD 23:59:59");
  }
  if (pointOrLine.value == "point") {
    GisPointInfoAPI.api_query(params).then(({ data, succeeded }) => {
      if (succeeded) {
        tableData.value = data.items;
        total.value = data.totalCount;
        let pointAttribute = [];
        if (data.items && data.items.length && data.items[0].pointAttribute) {
          if (typeof data.items[0].pointAttribute == "string") {
            pointAttribute = JSON.parse(data.items[0].pointAttribute);
          } else {
            pointAttribute = data.items[0].pointAttribute;
          }

          dynamicFields.value = pointAttribute;

          pointAttribute.forEach((item) => {
            attrTitleData.value.push(item.attr);
          });

          tableData.value.forEach((item, index) => {
            let att = [];
            if (typeof item.pointAttribute == "string") {
              att = JSON.parse(item.pointAttribute);
            } else {
              att = item.pointAttribute;
            }

            att.forEach((ele, eleIndex) => {
              tableData.value[index]["attr" + eleIndex] = ele.value;
            });
          });
        }

        console.log(pointAttribute.value);
      }
    });
  } else {
    GisLineInfoAPI.api_query(params).then(({ data, succeeded }) => {
      if (succeeded) {
        tableData.value = data.items;
        total.value = data.totalCount;

        if (JSON.stringify(data.items[0].lineAttribute).length) {
          JSON.stringify(data.items[0].lineAttribute).forEach((item) => {
            attrTitleData.value.push(item.attr);
          });
          tableData.value.forEach((item, index) => {
            JSON.stringify(item.lineAttribute).forEach((ele, eleIndex) => {
              tableData.value[index]["attr" + eleIndex] = ele.value;
            });
          });
        }
      }
    });
  }
}

// 查询所有设备
function f_ClickMenuMain(type) {
  attrTitleData.value = [];
  pointOrLineMain.value = type;
  pointOrLine.value = type;

  queryParams.pageSize = 10;
  queryParams.pageIndex = 1;

  dynamicFields.value = [];
  dynamicFieldsNew.value = [];
  if (type == "point") {
    const params = {
      pageSize: queryParams.pageSize,
      pageIndex: queryParams.pageIndex,
      pClassId: 1,
      isCoordinate: "true",
    };
    GisPointInfoAPI.api_query(params).then(({ data, succeeded }) => {
      if (succeeded) {
        tableData.value = data.items;
        total.value = data.totalCount;
      }
    });
  } else {
    const params = {
      pageSize: queryParams.pageSize,
      pageIndex: queryParams.pageIndex,
      pClassId: 2,
    };
    GisLineInfoAPI.api_query(params).then(({ data, succeeded }) => {
      if (succeeded) {
        tableData.value = data.items;
        total.value = data.totalCount;
      }
    });
  }
}

// 查询所有设备 分页
function f_ClickMenuMainPage() {
  if (pointOrLine.value == "point") {
    const params = {
      pageSize: queryParams.pageSize,
      pageIndex: queryParams.pageIndex,
      pClassId: 1,
      isCoordinate: "true",
    };
    if (queryVal.value.length) {
      params.queryVal = queryVal.value;
    }
    if (dateRange.value && dateRange.value.length) {
      params.startTime = moment(dateRange.value[0]).format(
        "yyyy-MM-DD 00:00:00"
      );
      params.endTime = moment(dateRange.value[1]).format("yyyy-MM-DD 23:59:59");
    }
    GisPointInfoAPI.api_query(params).then(({ data, succeeded }) => {
      if (succeeded) {
        tableData.value = data.items;
        total.value = data.totalCount;
      }
    });
  } else {
    const params = {
      pageSize: queryParams.pageSize,
      pageIndex: queryParams.pageIndex,
      pClassId: 2,
    };
    if (queryVal.value.length) {
      params.queryVal = queryVal.value;
    }
    if (dateRange.value && dateRange.value.length) {
      params.startTime = moment(dateRange.value[0]).format(
        "yyyy-MM-DD 00:00:00"
      );
      params.endTime = moment(dateRange.value[1]).format("yyyy-MM-DD 23:59:59");
    }
    GisLineInfoAPI.api_query(params).then(({ data, succeeded }) => {
      if (succeeded) {
        tableData.value = data.items;
        total.value = data.totalCount;
      }
    });
  }
}

// 查询 设备对应的明细
function f_HandelQueryList() {
  pointOrLineMain.value = "";
  const params = {
    pageSize: queryParams.pageSize,
    pageIndex: queryParams.pageIndex,
    classId: currentDeviceData.value.classId,
    isCoordinate: "true",
  };
  if (pointOrLine.value == "point") {
    GisPointInfoAPI.api_query(params).then(({ data, succeeded }) => {
      if (succeeded) {
        tableData.value = data.items;
        total.value = data.totalCount;
        // 获取动态属性标题
        if (data.items && data.items.length && data.items[0].pointAttribute) {
          // debugger;
          // if (typeof data.items[0].pointAttribute == "string") {
          //   pointAttribute = JSON.parse(data.items[0].pointAttribute);
          // } else {
          //   pointAttribute = data.items[0].pointAttribute;
          // }

          tableData.value.forEach((item, index) => {
            let att: Array = [];
            if (typeof item.pointAttribute == "string") {
              att = JSON.parse(item.pointAttribute);
            } else {
              att = item.pointAttribute;
            }

            dynamicFields.value.forEach((item, eleIndex) => {
              let attrValue = "";
              att.forEach((ele) => {
                if (ele.attr == item.attr) {
                  if (item.type == 4) {
                    attrValue = "-";
                  } else {
                    attrValue = ele.value;
                  }
                }
              });
              tableData.value[index]["attr" + eleIndex] = attrValue;
            });
          });
        }
      }
    });
  } else {
    GisLineInfoAPI.api_query(params).then(({ data, succeeded }) => {
      if (succeeded) {
        tableData.value = data.items;
        total.value = data.totalCount;

        let lineAttribute = [];
        if (typeof data.items[0].lineAttribute == "string") {
          lineAttribute = JSON.parse(data.items[0].lineAttribute);
        } else {
          lineAttribute = data.items[0].lineAttribute;
        }

        if (lineAttribute.length) {
          tableData.value.forEach((item, index) => {
            let att: Array = [];
            if (typeof item.lineAttribute == "string") {
              att = JSON.parse(item.lineAttribute);
            } else {
              att = item.lineAttribute;
            }
            dynamicFields.value.forEach((item, eleIndex) => {
              let attrValue = "";
              att.forEach((ele) => {
                if (ele.attr == item.attr) {
                  attrValue = ele.value;
                }
              });
              tableData.value[index]["attr" + eleIndex] = attrValue;
            });
          });
        }

        // dynamicFields.value = lineAttribute;

        // // 获取动态属性标题
        // Object.keys(JSON.stringify(data.items[0].lineAttribute)).forEach(
        //   (key: string) => {
        //     attrTitleData.value.push(key);
        //   }
        // );
        // tableData.value.forEach((item, index) => {
        //   if (item.lineAttribute) {
        //     let obj = {};
        //     console.log(typeof item.lineAttribute);
        //     if (typeof item.lineAttribute == "string") {
        //       obj = JSON.stringify(item.lineAttribute);
        //     } else {
        //       obj = item.lineAttribute;
        //     }
        //     Object.values(obj).forEach((ele, eleIndex) => {
        //       tableData.value[index]["attr" + eleIndex] = ele;
        //     });
        //   }
        // });
      }
    });
  }
}

window.onresize = () => {
  return (() => {
    tableHeight.value = window.innerHeight - 360;
  })();
};

onMounted(() => {
  tableHeight.value = window.innerHeight - 360;
  f_HandelQuery();
});
</script>
<style scoped lang="scss">
:deep .el-menu {
  height: calc(100% - 40px);
  border: none;
}

.add {
  padding-bottom: 10px;
  text-align: left;
  border-bottom: 1px dashed #dcdcdc;

  :deep .el-tag {
    height: 20px;
    padding: 4px 28px !important;
    font-size: 12px;
    cursor: pointer;
  }
}

:deep .el-sub-menu__title:hover {
  background-color: transparent !important;
}

:deep .el-menu-item:hover {
  background-color: #f5f5f5 !important;
}

.title {
  padding-bottom: 12px;
  color: #32bebd;
  border-bottom: 1px dashed #dcdcdc;
}

.device-icon {
  height: 24px;
  cursor: pointer;
  background: #03a9f43b;
  border-radius: 3px;
  padding: 2px;
  margin-right: 4px;
}

:deep .el-form--inline .el-form-item {
  width: 100%;
  margin-right: 0;
}
:deep .el-upload {
  height: 80px;
  width: 80px;
  border: 1px dashed #c1c1c1;
  border-radius: 4px;
}

.linePoint {
  height: 12px;
  width: 20px;
  display: inline-block;
  background: red;
  margin-top: 0px;
  margin-right: 4px;
  border-radius: 2px;
}
:deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
